<template>
	<div id="reg">
		<header class="top"><span>新用户注册</span></header>
		<van-form validate-first class="reg">
			<van-field name="uploader" label="上传头像">
				<template #input>
					<van-uploader v-model="uploader" multiple :max-count="1" />
				</template>
			</van-field>
			<!-- 通过 pattern 进行正则校验 -->
			<van-field v-model="value1" name="pattern" placeholder="请输入昵称" label="昵称 : " />
			<!-- 通过 validator 进行函数校验 -->
			<van-field v-model="value2" name="validator" placeholder="请输入密码" label="用户名 : " />
			<!-- 通过 validator 进行异步函数校验 -->
			<van-field v-model="value3" name="asyncValidator" type="password" placeholder="请输入密码" label="密码 : " />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit" class="submit" @click="reg">注册</van-button>
			</div>
			<div class="labal">
				<input type="checkbox" name="usr" id="labal" checked /> <label for="labal">已阅读并同意《用户协议》</label>
			</div>
			<div class="login">
				<a href="javascript:;">已有帐号？</a>
				<a href="javascript:;" @click="$router.push('/login').catch(() =>{})">去登陆>>></a>
			</div>
		</van-form>

	</div>
</template>

<script>
	export default {
		name: "reg",
		data() {
			return {
				value1: "",
				value2: "",
				value3: "",
				uploader: [],
			}
		},
		methods: {
			reg() {
				let formData = new FormData()
				formData.append('nikename', this.value1)
				formData.append('username', this.value2)
				formData.append('password', this.value3)
				if (this.uploader.length > 0) {
					formData.append('icon', this.uploader[0].file)
				}
				this.$axios({
					url: "/reg",
					method: 'post',
					data: formData
				}).then(res => {
					console.log(res)
					if (res.err == 1) {
						this.$toast(res.msg);
					} else {
						this.$toast("注册成功,跳转至登陆页面");
						this.$router.push('/login').catch(() =>{})
					}
				})
			}
		}
	}
</script>

<style scoped>
	#reg {
		background-color: #fff;
	}

	.top {
		font-size: 0.4rem;
		text-align: center;
		line-height: 0.8rem;
		height: 0.8rem;
		position: relative;
		top: 25vw;
	}

	.reg {
		position: relative;
		top: 40vw;
	}

	.reg .submit {
		background-color: #fc4e46;
		border-radius: 5px;
		border: none;
	}

	.labal {
		margin-left: 0.3rem;
	}

	.login {
		display: flex;
		padding: 0.1rem 0.4rem;
		justify-content: space-between;
	}
</style>
